<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width = device-width , initial-scale = 1 , minimum-scale = 1 , maximum-scale = 1 , user-scalable = no">
    <meta name="language" content="en" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="../../resource/css/userImageCutDemo.css" type="text/css" />
    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resource/css/common.css">
    <link rel="stylesheet" href="../../resource/css/style.css">
    <link rel="stylesheet" href="../../resource/css/imageClipStyle/comm.css">
    <link rel="stylesheet" href="../../resource/css/imageClipStyle/imageStyle.css">
</head>
<body>
    <div id="header"  class="bg-color-2">
        <a class="nav-back">返回</a>
        头像
        <span></span>
    </div>
    <div class="detail-part bg-color-2">
        <div class="detail-head bd-bot">
            <label class="head-image-user" for="file"><strong class="target-word">从相册中选择</strong></label>
            <input id="head-image" name="head-image" type=file accept="image/*">
        </div>
    </div>
    <div class="user-default default-pad">
    
    </div>
    <div class="lazy_tip" id="lazy_tip">
        <span>1%</span><br>
        加载中......
    </div>
    <div class="lazy_cover"></div>
    <div class="resource_lazy hide"></div>

    <div class="pic_edit" >
        <div id="clipArea"></div>
        <label for="file" class="file">选择图片</label>
        <button id="clipBtn">上传图片</button>
        <input type="file" id="file" style="opacity: 0;position: fixed;bottom: -100px">
    </div>
    <form id="uploadImage" action="http://coupon.dotfive.cn/UserCenter/uploadAvatar" method="post" enctype="multipart/form-data">
        <input id="token" type="hidden" name="token" />
        <input id="upload-image" style="display: none;" name="avatar" type=file accept="image/*">
        <img src="" title="upload.jpg" fileName="" id="hit" style="display:none;z-index: 9">
    </form>
    <!--   模态弹窗-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-body">

                </div>

            </div>
        </div>
    </div>
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../resource/js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../resource/js/bootstrap.min.js"></script>
<script src="../../resource/js/commonjs.js"></script>
<script src="../../resource/js/imageClip/jquery-2.1.0.min.js"></script>
<script src="../../resource/js/imageClip/sonic.js"></script>
<script src="../../resource/js/imageClip/comm.js"></script>
<script src="../../resource/js/imageClip/hammer.js"></script>
<script src="../../resource/js/imageClip/iscroll-zoom.js"></script>
<script src="../../resource/js/imageClip/jquery.photoClip.js"></script>
<script>
    function eventBinding() {
        $("#file").change(function () {
            $(".pic_edit").show();
        })
    }
    /* 获取头像 */
    function getUserDetail() {
        var url = "/UserCenter/getUserDetail";
        var arg = {};
        ajaxJsonp(url, arg, renderUserDetail);

        function renderUserDetail(res) {
            var user = res.data.user_info;
            var html = '';
            html += '<img src="'+ user.avatar +'" id="user-headImage" class="user-headImage-set"/>';
            $(".target-word").before(html);
            getDefaultAvatar();
        }
    }

    /* 获取默认头像 */
    function getDefaultAvatar() {
        var url = "/UserCenter/getDefaultAvatar";
        var arg = {};
        ajaxJsonp(url, arg, renderDefaultAvatar);

        /* 渲染头像列表 */
        function renderDefaultAvatar(res) {
            var datas = res.data;
            console.log(res);
            var html = '<ul>';
            for(var i = 0; i<datas.length; i++) {
                html += '<li><img data-id="'+ datas[i].id +'" src="'+ datas[i].url +'" onclick="choseImage(this)"/></li>';
            }
            html += '</ul>';
            $(".user-default").append(html);
        }
    }

    /* choseImage */
    function choseImage(target) {
        var src = $(target).attr("src");
        var id = $(target).attr("data-id");
        $("#user-headImage").attr("src", src);
        saveDefaultAvatar(id);

        function saveDefaultAvatar(id) {
            var url = "/UserCenter/saveDefaultAvatar";
            var arg = {};
            arg.id = id;
            ajaxJsonp(url, arg);
        }
    }

    /*(function () {
        var viewFiles = document.getElementById("head-image");
        var viewImg = document.getElementById("user-headImage-set");
        function viewFile (file) {
            //通过file.size可以取得图片大小
            if(file.size > 500*1204) {
                showModal("图片过大");
                return
            } if(!file) {
                return
            }
            console.log(file.size);
            var reader = new FileReader();
            reader.onload = function(evt){
                viewImg.src = evt.target.result;
                $(".user-default").hide();
                $(".container").show();
            }
            reader.readAsDataURL(file);
        }
        viewFiles.addEventListener("change", function () {
            //通过 this.files 取到 FileList ，这里只有一个
            viewFile(this.files[0]);
        }, false);
    })();*/


    var hammer = '';
    var currentIndex = 0;
    var body_width = $('body').width();
    var body_height = $('body').height();

    $("#clipArea").photoClip({
        width: body_width * 0.8125,
        height: body_width * 0.8125,
        file: "#file",
        view: "#hit",
        ok: "#clipBtn",
        loadStart: function () {
            //console.log("照片读取中");
            $('.lazy_tip span').text('');
            $('.lazy_cover,.lazy_tip').show();
        },
        loadComplete: function () {
            //console.log("照片读取完成");
            $('.lazy_cover,.lazy_tip').hide();
        },
        clipFinish: function (dataURL) {
            $('#hit').attr('src', dataURL);
            saveImageInfo();
        }
    });

    //图片上传
    function saveImageInfo() {
        console.log(1)
        var filename = $('#hit').attr('fileName');
        var imageData =  $('#hit').attr('src');
        $("#head-image").attr('src', imageData);
        $("#user-headImage").attr('src', imageData);
        $("#upload-image").attr('src', imageData);
        $('#uploadImage').submit();
        $(".pic_edit").hide();
       /* $.post("http://coupon.dotfive.cn/UserCenter/uploadAvatar", {image: img_data}, function (data) {
            if (data != '') {
//			console.info(data);
                //data 为返回文件名；
                alert('提交成功');
            }
        });*/
    }
    /*获取文件拓展名*/
    function getFileExt(str) {
        var d = /\.[^\.]+$/.exec(str);
        return d;
    }
    //图片上传结束

    $(function() {
        $(".pic_edit").hide();
        isLogin();
        getUserDetail();
        eventBinding();
        $("#token").val(getCookie("token"));
        $(".nav-back").click(function(){
            history.go(-1);
            $('.back').css({'color':'rgb(0,170,144)'})
        });
    });
</script>
<div id="cover"></div>
</body>
</html>